<template>
  <!-- 一般情况下 class类名应与组件名匹配
        组件名: Person.vue  class类:person
        组件名:MyTag.vue    class类:my-tag -->
  <div class="person">
    <img :src="avatar" width="140px" />
    <div>
      <span>{{ name }}</span>
      <span>{{ location }}</span>
      <div>
        <el-button type="success" @click="doClick">去下单</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    avatar: {
      // 声明属性,指定头像
      type: String,
      default: '',
    },
    name: {
      // 声明属性, 指定需要显示的昵称
      type: String,
      default: '默认昵称',
    },
    location: {
      // 声明属性,指定地址
      type: String,
      default: '默认昵称',
    },
    price: {
      // 声明属性,指定地址
      type: String,
      default: '默认昵称',
    },
  },
  methods: {
    doClick() {
      // 在此发现用户点击了去下单按钮
      // 需要立即通知父组件自定义事件:  被触发
      // $eimt()方法用于通知父组件自定义事件
      // 参数 '' 就是自定义事件的事件类型名称
      // 在父组件中 就可以通过<person @jump=""></person>执行
      this.$emit('jump')
    },
  },
}
</script>

<style lang="scss" scoped>
.person {
  margin: 5px;
  display: inline-block;
  width: 600px;
  padding: 5px;
  border: 1px solid #ccc;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: space-evenly;

  img {
    width: 250px;
  }

  div {
    display: flex;
    text-align: left;
    justify-content: space-between;
    flex-direction: column;

    span:nth-child(1) {
      font-size: 20px;
      margin-left: 15px;
      font-weight: bold;
    }

    span:nth-child(2) {
      font-size: 12px;
      margin-left: 15px;
      font-weight: 200;
    }

    div {
      display: flex;
      justify-content: space-between;
      position: relative;

      span {
        font-size: 16px;
        margin-left: 15px;
        color: red;
      }
      button {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
}

.person:hover {
  transform: scale(1.0001);
  box-shadow: 1px 3px 3px #888888;
}
</style>
